<script setup>
import Son from "@/components/3props/1.子组件.vue"
import {ref} from "vue";
// 在父组件中创建响应式对象
const posts = ref([
  {id: 1, title: 'My journey with Vue'},
  {id: 2, title: 'Blogging with Vue'},
  {id: 3, title: 'Why Vue is so fun'}
])

// 测试传递类型
// const posts = ref([
//   { id: 1, title: 1 },
//   { id: 2, title: 2 },
//   { id: 3, title: 3 }
// ])


</script>

<template>
  <!--  title名称是传递给子组件使用的名称-->
<!--  v-for 会遍历三次Son组件-->

  <Son
      v-for="post in posts"
      :key="post.id"
      :title="post.title"/>

  <!--  在父组件传递子组件属性时使用的kebab-case 形式为了和组件名称区分-->
    <Son greeting-message="hello" />

  <!--   在子组件中可以传递不同类型的值 具体类型见文档！-->
</template>


<style scoped>

</style>
